<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TBT后台管理</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>

        body {
            margin: 0;
            padding: 0;
            background-image: url('image/background.jpg'); /* 替换为你的图片路径 */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            min-height: 100vh;
        }

        #mainHeader{
            background-color: rgba(179, 192, 209, 0.8);
            color: #333;
            text-align: center;
            line-height: 70px;
        }

        el-main {
            position: relative; /* 父容器设为相对定位 */
            min-height: 100vh;
        }

        .loginForm {
            position: absolute;
            top: 55%;
            left: 75%;
            transform: translate(-50%, -50%);
            width: 300px;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div id="app">

    <el-container>
        <el-header id="mainHeader" height="160px">
            <p style="text-align: center; font-size: 48px;
            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
             -webkit-background-clip: text; color: transparent;">
                TBT火车订票后台管理系统</p>
        </el-header>

        <el-main>
            <div class="loginForm" v-show="loginVisible">
                <el-header style="text-align: center;">您好，请登录</el-header>
            <el-form ref="loginForm" :model="loginForm" label-width="80px">
                <el-form-item label="账号" prop="user">
                    <el-input v-model="loginForm.username" ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="loginForm.password" ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loginIn">登录</el-button>

                    <el-link type="primary" underline style="margin-left: 30px;">忘记密码</el-link>
                    <br>

                </el-form-item>
            </el-form>

            </div>
        </el-main>

    </el-container>

</div>
</body>
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {

            return {
                loginVisible : true,

                loginForm:{
                    username: 'username',
                    password: 'password'
                },


            };
        },
        methods: {
            loginIn(){
                if(this.loginForm.username === ''||this.loginForm.password === ''){
                    this.$message({
                        showClose: true,
                        message: '请输入账号和密码！',
                        type: 'error'
                    });
                    return;
                }
                var _this=this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/administrator/login",
                    data:_this.loginForm
                }).then(function (resp) {
                    if(resp.data.code === 1){
                        _this.$message({
                            showClose: true,
                            message: '登录成功！',
                            type: 'success'
                        });
                        _this.loginVisible=false;
                        window.location.href="index.html";
                    }else {
                        _this.$message({
                            showClose: true,
                            message: '账号或密码错误！',
                            type: 'error'
                        });
                    }
                })
                this.cleanModel();
            }


        }
    });
</script>

</html>